<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<script type="text/javascript" src="js/jquery-1.11.1.js">
			
		</script>
	</head>
	<body>
		<div class="picture">
			
			<div class="pic">
				<img src="img/01.jpg"/>
				<div class="cho">
					巧克力蛋糕
				</div>
			</div>
			<div class="pic">
				<img src="img/02.jpg"/>
				<div class="cho">
					巧克力蛋糕
				</div>
			</div>
			<div class="pic">
				<img src="img/03.jpg"/>
				<div class="cho">
					巧克力蛋糕
				</div>
			</div>
			<div class="pic">
				<img src="img/04.jpg"/>
				<div class="cho">
					巧克力蛋糕
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		$(function(){
			$(".pic").mouseover(function(){				
				$(this).children("img").stop().animate({marginLeft:"-50px"},1000);
			});
			$(".pic").mouseout(function(){				
				$(this).children("img").stop().animate({marginLeft:"0"},500);
			});
			$(".pic").mouseover(function(){
				$(this).children(".cho").stop().fadeIn();
			})
			$(".pic").mouseout(function(){
				$(this).children(".cho").stop().fadeOut();
			})
			
		});
	</script>
</html>
